 <template>
   <el-dialog
       title="校区审核"
      :visible.sync="formInfoObj.visible"
       width="30%">
      <el-form :model="formInfoObj"
          :rules="rulesRef"
          ref="ruleFormsRef">
         <el-form-item label="审核学校">
          <el-tag>{{formInfoObj.name}}</el-tag>
        </el-form-item>
        <el-form-item label="学校地址">
          <el-tag>{{formInfoObj.location}}</el-tag>
        </el-form-item>
        <el-form-item label="审核状态" prop="result">
          <el-select style="width:100%" v-model="formInfoObj.result">
            <el-option :value="item.value" :label="item.label" v-for="item in shopAuditData" :key="item.value"></el-option>
          </el-select>
         </el-form-item>
        <el-form-item label="审核意见" prop="reason">
           <el-input
           type="textarea"
           :autosize="{ minRows: 6, maxRows: 10}"
           placeholder="请输入内容"
           show-word-limit
           maxlength="50"
          v-model="formInfoObj.reason">
         </el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
        <el-button @click="formInfoObj.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitform(ruleFormsRef)">确 定</el-button>
       </span>
     </el-dialog>
 </template>


<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import store from '@/store'
import {setMerchantShopAudit} from '@/api/merchant/shop_api.js'
export default {
  name: 'shopAudit',
  setup(props, { emit }) {
   // const emits = defineEmits(['onOk'])
    const Interface = reactive({
      openForm(row){
        query.formInfoObj.shopId = row.id
        query.formInfoObj.result = ''
        query.formInfoObj.reason = ''
        query.formInfoObj.name = row.name
        query.formInfoObj.location = row.location
        query.formInfoObj.visible = true
      },
      async submitform(formEl){
        if (!formEl) return;
        await formEl.validate(async(valid, fields) => {
          if (valid) {
            if(query.formInfoObj.result === 2 && !query.formInfoObj.reason){
              Message.error('请选择不通过意见')
              return;
            }
            const {code} = await setMerchantShopAudit(query.formInfoObj)
            if(code === 0){
              Message.success('操作成功')
              query.formInfoObj.visible = false
              emit('onOk')
            }
          }
        })       
      },
    })
        const ruleFormsRef = ref(null)
    const query = reactive({
           shopAuditData:computed(() => store.getters['baseStore/shopAuditYesOrNoData']),
      rulesRef:{
        result:[{ required: true, message: "请选择审核状态", trigger: "blur" }],
        reason:[{ required: true, message: "请输入审核意见", trigger: "blur" }],
      },
      formInfoObj:{
        result:'',
         visible:false,
         reason:'',
        id:'',
        name:'',
        location:'',
        auditData:[
          {value:1,label:'扭转成待审核'},
          {value:2,label:'审核通过(上架)'},
          {value:3,label:'审核未通过'},
          {value:4,label:'下架'},
          {value:5,label:'删除'}
        ],
        shopId:'',
        name:''
       }

    })
    return {
      ruleFormsRef,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
}
</script>